/*
 * Copyright 2016 ZTE Corporation.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
(function(Application){

	Application.registerElement(Application.View.Element.extend({

		content: function(){
			return "";
		},

		css: function(){
			return {
				"-webkit-border-radius": "30px",
				"-moz-border-radius": "30px",
				"background-image" :"url('')",
				"background-size": "cover",
				"border": "4px solid #000",
				"border-radius": "30px",
				"height": "30px",
				"width": "30px"
			};
		},

		dialog: function(){
			var dialog = new Application.View.Dialog({
				id: (this.model.get("id") + "_dialog"),
				model: this.model,
				title: "Edit End Event"
			});
			dialog.on("append", function(event){
				var parameter = new Application.View.DialogParameter({
					direction: "input",
					editable: true,
					model: this.model,
					name: _.uniqueId("Parameter"),
					sources: ["concat", "string", "plan", "topology"],
					type: "plan"
				});
				event.dialog.$el.find("form").append(parameter.render().el);
				parameter.trigger("rename");
			});
			dialog.on("confirm", function(event){
				this.model.set({
					name: event.dialog.$el.find("#name").val(),
					input: _.object(_.map(event.dialog.$el.find(".parameter.input"), function(parameter){
						var json = Backbone.$(parameter).data("parameter").toJSON();
						return [Backbone.$(parameter).data("parameter").name(), json];
					}))
				});
			});
			dialog.on("show", function(event){
				event.dialog.$el.find("form").append(
					"<div class=\"form-group\">"
						+"<label for=\"\" class=\"col-sm-3 control-label\">Name</label>"
						+"<div class=\"col-sm-9\"><input type=\"text\" autocomplete=\"off\" class=\"form-control\" id=\"name\" name=\"name\" value=\"" + this.model.get("name") + "\" /></div>"
						+"</div>"
					+"<hr/>"
				);
				event.dialog.$el.find(".modal-footer .pull-left").append(
					"<button type=\"button\" class=\"btn btn-default\" data-event=\"append\">Append Output Parameter</button>"
				);
				_.each(this.model.get("input"), function(parameter, name){
					event.dialog.$el.find("form").append(new Application.View.DialogParameter({
						direction: "input",
						editable: true,
						model: this.model,
						name: name,
						sources: ["concat", "string", "plan", "topology", "deployment_artifact", "implementation_artifact"],
						type: "plan"
					}).render().el);
				}, this);
			});
			dialog.show();
		}

	}, {type: "EndEvent"}));

})(window.BPMN4TOSCAModeler);